const { connect } = dva;
const { Layout } = antd;
const { Header, Sider, Content } = Layout;
const AppMenu = require('./AppMenu.jsx');
const AppHeader = require('./AppHeader.jsx');

function App (props) {
    const { collapsed, loginSuccess, children } = props, overflow = { overflow: 'auto' };
    return (
        <Layout style={{ height: '100vh' }}>
            { !loginSuccess ? '':
                <Sider
                    style={ collapsed ? {} : overflow }
                    trigger={null}
                    collapsible={true}
                    collapsed={collapsed}
                >
                    <AppMenu />
                </Sider>
            }
            <Layout style={ overflow }>
                { !loginSuccess ? '':
                    <Header style={{ background: '#fff', padding: 0 }}>
                        <AppHeader />
                    </Header>
                }
                <Layout style={ overflow }>
                    <Content className='content'>{children}</Content>
                </Layout>
            </Layout>
        </Layout>
    );
}

module.exports = connect(state => state.app)(App);